<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div class="slide-in-left">Hello, I am sliding in from the left!</div>
    
</body>
<style>
  @keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation-name: slideInLeft;
  animation-duration: 1s; /* 动画持续时间 */
  animation-timing-function: ease-out; /* 动画速度曲线 */
  animation-fill-mode: both; /* 让动画在开始前和结束后保持最后一帧 */
}
</style>
</html>